MWC to Swarm-UI Migration Docs

---

Below are a few examples of migrating simple and complex components from meetup-web-components to Swarm-UI.

RadioButton example

---

Before, using meetup-web-components:

import RadioButton from 'meetup-web-components/lib/forms/RadioButton';

<RadioButton
    name="option"
    value="1"
    checked={true}
    className={text('className', '')}
    label={text('label', 'This is a radio')}
/>

After, using swarm-ui:

import { Button } from '@meetup/swarm-components';

<Radio
    name="swarm"
    label="swarm"
    value="1"
    checked={true}
    onChange={(e) => alert(e.target.value)} />

Swarm UI examples

Radio button with `label` prop

Radio button using children as label

Radio Button with nested children as label

Disabled radio button

Disabled, checked radio button

RadioButtonGroup example

---

Before, using meetup-web-components:

import RadioButton from 'meetup-web-components/lib/forms/RadioButton';
import RadioButtonGroup from 'meetup-web-components/lib/forms/RadioButtonGroup';

    <RadioButtonGroup
        name="radioButtonGroup"
        onChange={action('radio button change')}
        className={classNameKnob}
        direction={directionKnob}
        selectedValue={selectedValueKnob}
    >
        <RadioButton value="one" label="Option 1" name="radioButton" />
        <RadioButton value="two" label="Option 2" name="radioButton" />
        <RadioButton value="three" label="Option 3" name="radioButton" />
    </RadioButtonGroup>

After, using swarm-ui:

export const GroupRadioButtonsExample = () => {
  const [shape, setShape] = React.useState('circle');

  React.useEffect(() => console.log(shape));

  return(
    <>
      <Radio
        name='shape'
        label="Circle"
        id='circle'
        value='circle'
        onChange={(e) => setShape(e.target.value)}
        checked={shape === 'circle'}
      />
      <Radio
        name="shape"
        label="Square"
        id='square'
        value='square'
        onChange={(e) => setShape(e.target.value)}
        checked={shape === 'square'}
      />
      <Radio
        name="shape"
        label="Triangle"
        id='triangle'
        value='triangle'
        onChange={(e) => setShape(e.target.value)}
        checked={shape === 'triangle'}
      />
    </>
  );
};

Swarm UI example

CircleSquareTriangle